<template>
    <div>
      <Card>
        <p slot="title">
            添加平台用户
        </p>
        <div>
            <Form class="step-form" ref="userData" :model="userData" :rules="userDataRules" :label-width="100">
                <Row span="12">
                    <i-col span="12" >
                        <FormItem label="手机号：" prop="tel" label-position="left" :label-width="150">
                            <Input :disabled="hasSubmit" v-model="userData.tel" type="text" placeholder="手机号不能为空" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row span="12">
                    <i-col span="12" >
                        <FormItem label="输入密码："  prop="password" label-position="left" :label-width="150">
                            <Input :disabled="hasSubmit" v-model="userData.password" type="password" placeholder="输入数据不能为空" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row span="12">
                    <i-col span="12" >
                        <FormItem label="确认密码："  prop="password1" label-position="left" :label-width="150">
                            <Input :disabled="hasSubmit" v-model="userData.password1" type="password" placeholder="输入数据不能为空" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row span="12">
                    <i-col span="12" >
                        <FormItem label="用户名：" prop="username" label-position="left" :label-width="150">
                            <Input :disabled="hasSubmit" v-model="userData.username" type="text" placeholder="输入数据不能为空" />
                        </FormItem>
                    </i-col>
                </Row>
                <Row span="12">
                    <i-col span="12" >
                        <FormItem label="用户昵称：" prop="nickname" label-position="left" :label-width="150">
                            <Input :disabled="hasSubmit" v-model="userData.nickname" type="text" placeholder="输入数据不能为空" />
                        </FormItem>
                    </i-col>
                </Row>


                <!--<Row span="12">
                    <i-col span="10">
                        <FormItem label="身份证图片：" prop="cardUrl" label-position="left" :label-width="150">
                            <img v-if="userData.cardUrl !== ''" :src="userData.cardUrl" height="200" width="200">
                        </FormItem>
                    </i-col>
                    <i-col span="1">
                        <Upload
                            :show-upload-list="false"
                            :before-upload="handleUpload"
                            action="//jsonplaceholder.typicode.com/posts/">
                            <Button>上传</Button>
                        </Upload>
                    </i-col>
                </Row>
                <Row span="12">
                    <i-col span="10">
                        <FormItem label="名片图片：" prop="businessCardUrl" label-position="left" :label-width="150">
                            <img v-if="userData.businessCardUrl !== ''" :src="userData.businessCardUrl" height="200" width="200">
                        </FormItem>
                    </i-col>
                    <i-col span="1">
                        <Upload
                            :show-upload-list="false"
                            :before-upload="businesshandleUpload"
                            action="//jsonplaceholder.typicode.com/posts/">
                            <Button>上传</Button>
                        </Upload>
                    </i-col>
                </Row>-->
                <!-- <Row span="12">
                    <i-col span="10">
                        <FormItem label="名片图片：" prop="businessCardUrl" label-position="left" :label-width="150">
                            <Upload
                            style="card-upload"
                            :show-upload-list="false"
                            :before-upload="handleUpload"
                            action="//jsonplaceholder.typicode.com/posts/">
                                <template v-if="userData.businessCardUrl.length == 0 && !uploadLoading">
                                    <div style="width: 60px;height: 60px;border: 1px solid #d8d8d8; text-align: center; line-height: 60px">
                                    <Icon type="ios-cloud-upload" size="32" style="color: #3399ff"></Icon>
                                    </div>
                                </template>
                                <template v-if="userData.businessCardUrl.length > 0 && !uploadLoading">
                                    <img v-if="userData.businessCardUrl !== ''" :src="userData.businessCardUrl" height="200" width="200">
                                    <div class="demo-upload-list-cover">
                                        <Icon type="ios-eye-outline" @click.native="handleView(userData.businessCardUrl)"></Icon>
                                    </div>
                                </template>
                                <Spin v-if="uploadLoading"></Spin>
                            </Upload>
                        </FormItem>
                    </i-col>
                    <i-col span="1">

                    </i-col>
                </Row> -->

                <FormItem >
                    <Button :disabled="hasSubmit" @click="saveData" style="width:100px;" type="primary">提交</Button>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <Button :disabled="hasSubmit" @click="goBack" style="width:100px;" >返回</Button>
                </FormItem>
            </Form>
        </div>
    </Card>
    </div>
</template>

<script>
import ajax from '../../../libs/axios.js'
export default {
    name: 'addUser',
    data () {
        return {
            hasSubmit: false,      // 不可点击状态
            // 图片上传
            file: null,
            status: 'wait',
            uploadLoading: false,  // 上传图片时候的加载效果
            uploadType:0,          // 上传类型，1：身份证图片类型、2：名片图片类型
            userData: {
                id:'',             // 用户id
                username:'',       // 用户名称
                password:'',       // 密码
                status:1,
                nickname:'',       // 用户昵称
                tel:'',            // 手机号
            },
            userDataRules: {
                username: [
                    { required: true, message: '请输入用户名称', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                password1: [
                    { required: true, message: '请输入确认密码', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过15个字符', trigger: 'blur'}
                ],
                nickname: [
                    { required: true, message: '请输入用户昵称', trigger: 'blur'},
                    {type: 'string', max: 15, message: '不能超过5个字符', trigger: 'blur'}
                ],
                tel: [
                    { required: true, message: '请输入手机号码', trigger: 'blur'}
                ]
                // 暂时不进行验证
                // cardUrl: [
                //     { required: true, message: '请上传疾病图片', trigger: 'blur'},
                // ],
                // businessCardUrl: [
                //     { required: true, message: '请上传疾病图片', trigger: 'blur'},
                // ]

            },
        }
    },
    created () {
        this.init()
    },
    activated () {
        this.init()
    },
    methods: {
        // 数据初始化
        init () {
            this.$store.commit('setActiveName', 'setuserindex');
        },
        // 身份证图片上传
        handleUpload (file) {
            this.uploadType = 1
            this.file = file
            this.upload()
            return false;
        },
        //名片图片上传
        businesshandleUpload (file) {
            this.uploadType = 2
            this.file = file
            this.upload()
            return false;
        },
        // 获取列表数据
        getList (page) {
            let _that = this;
            let url = 'adminlogin/suser/selectSUser'
            let data = {
                tel: this.mobile,
                pageSize: 10,
                pageNum: page
            }
            ajax.formRes(url, data).then(res => {
                _that.tableData = res.data;
                _that.itemTotal = res.count;
            }).catch(err => {
                console.log('有错误信息')
                // fail
            })
        },
        // 上传图片
        upload () {
            let that = this
            let fileName = that.file.name
            //FormData 对象
            let formData = new FormData()
            console.log(fileName)
            this.uploadLoading = true
            // 文件对象
            formData.append("img", that.file)
            ajax.upload('adminlogin/uploadImage',formData).then(function (res) {
                if(that.uploadType == 1){
                    setTimeout(() => {
                        that.userData.cardUrl = res.url
                        that.file = ''
                        this.$Message.success('上传成功')
                    }, 1500);
                }else if(that.uploadType == 2){
                    setTimeout(() => {
                        that.userData.businessCardUrl = res.url
                        that.file = ''
                        this.$Message.success('上传成功')
                    }, 1500);
                }else{
                     this.$Message.success('上传失败，没有该类型数据')
                }
                that.uploadLoading = false
            }).catch(function (error) {
                console.log(error)
                this.uploadLoading = false
            })
        },
        // 添加数据
        saveData () {
            let that = this
            that.$refs['userData'].validate((valid) => {
                if (valid) {
                    if(that.userData.password != that.userData.password1){
                        that.$Modal.warning({
                            title: '警告',
                            content: '密码不一致，请核对。'
                        });
                    }else{
                        that.hasSubmit = true
                        let url = 'adminlogin/suser/addSUser'
                        let data = that.userData
                        ajax.formRes(url, data).then(res => {
                            // success
                            that.$Message.success('新增数据成功,页面正在跳转')
                            setTimeout(function () {
                                that.hasSubmit = false
                                let argu = {
                                }
                                that.$router.push({
                                    name: 'setuserindex',
                                    params: argu
                                })
                            }, 1500)
                        }).catch(err => {
                            console.log('有错误信息')
                            // fail
                        })
                    }

                } else {
                    console.log('新增失败。。。')
                }
            })
        },
        // 返回
        goBack () {
            this.$router.push({
                name: 'setuserindex'
            })
        },
    },
}
</script>
<style>
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .card-upload:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
</style>

